<script setup>

</script>

<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="formInline.studentname" placeholder="请输入学生姓名" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="warning" @click="onAdd">新增</el-button>
      </el-form-item>
    </el-form>




    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="studentname" label="姓名" width="180" />
      <el-table-column prop="gender" label="性别" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="address" label="地址" />
      <el-table-column  label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="onEdit(scope.row)" >编辑</el-button>
          <el-button type="danger" size="small"  @click="onDel(scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background
                   layout="total,prev, pager, next,jumper"
                   :total="total"
                   :page-count="pages"
                   :current-page="pageNum"
                   @current-change="changePageNum"
    />


    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
    >
      <span>This is a message</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {reactive,toRefs,onMounted} from 'vue'
import axios from "axios";
export default {
  name:"StuView",
  setup(){

    const data = reactive({
      formInline:{
        studentname:''
      },
      dialogVisible:false,
      pageNum:1,
      tableData:[],
      total:0,
      pages:0,
    })
    const onAdd = () => {
      data.dialogVisible=true
    }
    const changePageNum = (pageNo) => {
      data.pageNum=pageNo
      getBackData()
    }
    const onSubmit = () => {
      data.pageNum=1,
      getBackData()
    }
    onMounted(function (){
      getBackData()
    })
    
    const getBackData = () => {
      axios({
        url:'/api/student?stuName='+data.formInline.studentname+'&pageNum='+data.pageNum,
        method:'get'
      }).then(function (res){
        console.log(res)
        data.tableData=res.data.data.records
        data.pageNum=res.data.data.current
        data.total=res.data.data.total
        data.pages=res.data.data.pages
      })
    }

    return{
      ...toRefs(data),
      getBackData,
      onSubmit,
      changePageNum,
      onAdd
    }
  }
}
</script>

<style scoped lang="scss">

</style>